﻿<UserControl x:Class="RobertMcLaws.TwilioForWin8.GroupedCollectionPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Loaded="Page_Loaded" Unloaded="Page_Unloaded"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366">

    <UserControl.Resources>
        <CollectionViewSource x:Name="GroupedCollectionViewSource" x:Key="GroupedCollectionViewSource" />

        <Style x:Key="AppBarButtonStyle" TargetType="Button">
            <Setter Property="MinWidth" Value="40" />
            <Setter Property="Width" Value="40" />
            <Setter Property="Height" Value="40" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="AppButton">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverEllipse" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PressedEllipse" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.35" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="AppButton" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Ellipse x:Name="PressedEllipse" Fill="{StaticResource HighlightBrush}" Opacity="0" Width="40" Height="40"/>
                            <Ellipse x:Name="MouseOverEllipse" Fill="#7F8D8D8D" Opacity="0" Width="40" Height="40"/>
                            <ContentPresenter Width="40" Height="40"/>
                            <Path Data="F1M20.2168,40C31.2608,40,40.2168,31.045,40.2168,20C40.2168,8.958,31.2608,0,20.2168,0C9.1708,0,0.216799999999999,8.958,0.216799999999999,20C0.216799999999999,31.045,9.1708,40,20.2168,40 M20.2168,37.161C10.7548,37.161,3.0578,29.462,3.0578,20C3.0578,10.538,10.7548,2.839,20.2168,2.839C29.6788,2.839,37.3758,10.538,37.3758,20C37.3758,29.462,29.6788,37.161,20.2168,37.161" Fill="White" Height="40" Canvas.Left="0" Stretch="UniformToFill" Canvas.Top="0" Width="40"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="AppBarTextStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="FontFamily" Value="Segoe UI"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="0,7,0,0"/>
        </Style>


        <ItemsPanelTemplate x:Key="GridItemsPanelTemplate">
            <StackPanel Orientation="Horizontal" Margin="120,0,0,0" />
            <!-- Workaround: this should be a virtualizing stack panel but it currently fails when switching between view states
      <VirtualizingStackPanel Orientation="Horizontal" Margin="120,0,0,0" VirtualizationMode="Recycling"/> -->
        </ItemsPanelTemplate>
    </UserControl.Resources>

    <!--Page Content -->

    <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="OrientationStates">
                <VisualState x:Name="Full" />
                <VisualState x:Name="Fill" />
                <VisualState x:Name="Portrait" />
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="BackButton">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="PageTitle">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapPageTitleStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemListView">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemGridView">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Standard title area -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="BackButton" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="PageTitle" Text="{StaticResource AppName}" Grid.Column="1" Style="{StaticResource PageTitleStyle}" />
        </Grid>

        <!-- List style presentation only used in "snapped" view state -->
        <ListView x:Name="ItemListView" Grid.Row="1" Visibility="Collapsed" ItemsSource="{Binding Source={StaticResource GroupedCollectionViewSource}}"
              ItemTemplate="{StaticResource SnapListItemTemplate}" ItemContainerStyle="{StaticResource SnapListTileStyle}" ItemsPanel="{StaticResource SnapListItemsPanelTemplate}"
              Margin="6,0,6,0" BorderThickness="0" VerticalAlignment="Stretch" Background="Transparent" SelectionChanged="ItemGridView_SelectionChanged">
            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical"/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Margin="0,0,0,8" Style="{StaticResource LargeContentFontStyle}" Text="{Binding Name.Title}" PointerReleased="Header_PointerReleased"/>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>
        </ListView>

        <!-- Grid presentation used in all other view states -->
        <GridView x:Name="ItemGridView" Grid.Row="1" ItemsSource="{Binding Source={StaticResource GroupedCollectionViewSource}}"
              ItemTemplate="{StaticResource GroupedItemTemplate}" ItemContainerStyle="{StaticResource GridTileStyle}" ItemsPanel="{StaticResource GridItemsPanelTemplate}"
              BorderThickness="0" VerticalAlignment="Stretch" Background="{StaticResource PageBackgroundBrush}" SelectionChanged="ItemGridView_SelectionChanged">
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Margin="0,0,0,8" Style="{StaticResource LargeContentFontStyle}" Text="{Binding Name.Title}" PointerReleased="Header_PointerReleased"/>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>

                    <!-- Workaround: this is currently necessary to limit the number of items displayed to the available space -->

                    <GroupStyle.ContainerStyle>
                        <Style TargetType="GroupItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="GroupItem">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                            <ContentPresenter Grid.Row="0"/>
                                            <ItemsControl x:Name="ItemsControl" Grid.Row="1" ItemsSource="{Binding GroupItems}" />
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>

        <ApplicationBar x:Name="ApplicationBar" VerticalAlignment="Bottom" Grid.Row="1" DismissMode="LightDismiss" TuckHeight="0">
            <Grid Margin="0,0,0,18">

                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,48,0">
                    <StackPanel Margin="24,18,0,0" VerticalAlignment="Center" Width="72">
                        <Button x:Name="SmsButton" IsEnabled="{Binding CanFlipPrevious}" Click="SmsButton_Click" Style="{StaticResource AppBarButtonStyle}">
                            <Path Fill="White" Stretch="Fill" Canvas.Left="9.269" Canvas.Top="11" Width="20" Height="20" Data="F1 M 25.5036,12.0017C 31.3034,12.0017 36.005,14.9122 36.005,18.5026C 36.005,20.7795 34.1142,22.783 31.2515,23.9441C 31.8618,25.1224 32.9332,26.4184 34.0046,28.0506C 31.7765,27.2732 28.4452,26.5215 26.4683,24.9764L 25.5036,25.0035C 19.7038,25.0035 15.0021,22.0929 15.0021,18.5026C 15.0021,14.9122 19.7038,12.0017 25.5036,12.0017 Z M 28.0039,27.5038C 28.0039,30.5418 24.4217,33.0046 20.0028,33.0046L 19.3946,32.989C 17.7681,34.4944 15.5109,36.005 13.0018,36.005C 13.5861,34.8364 14.8531,33.6679 15.6063,32.1005C 13.4348,31.1168 12.0017,29.4254 12.0017,27.5038C 12.0017,25.583 13.4337,23.8922 15.6038,22.9083C 17.4614,24.7395 20.7528,25.9568 24.5036,25.9568L 25.4683,25.9297C 26.1761,26.4829 27.0574,26.9343 27.9996,27.3217L 28.0039,27.5038 Z "/>
                        </Button>
                        <TextBlock Text="Previous" Style="{StaticResource AppBarTextStyle}"/>
                    </StackPanel>

                </StackPanel>
            </Grid>
        </ApplicationBar>

    </Grid>

</UserControl>
